<!--
 * @Author: your name
 * @Date: 2020-08-12 09:58:07
 * @LastEditTime: 2020-08-12 13:59:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \use-svg\src\views\icondemo\index.vue
-->
<template>
  <div>
    <icon-select></icon-select>
    <div class="test">
      <ul class="icon-demo" v-for="item in iconsMap" :key="item">
        <li>
          <icon-svg :iconClass="item"></icon-svg>
          <p>{{item}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import icons from "./createIconMap";
import IconSelect from "@/components/IconSelect";
export default {
  components: {
    IconSelect,
  },
  data() {
    return {
      iconsMap: [],
    };
  },
  mounted() {
    console.log(icons.state.iconsMap);
    const iconsMap = icons.state.iconsMap.map((i) => {
      return i.default.id.split("-")[1];
    });
    this.iconsMap = iconsMap;
  },
};
</script>

<style lang="scss">
.icon-demo {
  list-style: none;
  // overflow: hidden;
  li {
    float: left;
    min-width: 60px;
    text-align: center;
    padding: 20px;
    height: 80px;
    .bac-icon {
      font-size: 50px;
      color: #3a8ee6;
    }
    p {
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>